<script setup lang="ts">
import type { UserInfoVO } from "@/types/loginType";

const { safeAreaInsets } = uni.getSystemInfoSync();

interface ProfileProps {
   userInfo: UserInfoVO;
}

defineProps<ProfileProps>();

</script>

<template>
   <view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <!-- 情况1：已登录 -->
      <view class="overview" v-if="userInfo.id">
         <navigator url="/subPackages/profile/profile" hover-class="none">
            <image class="avatar" mode="aspectFill" :src="userInfo.avatar"></image>
         </navigator>
         <view class="meta">
            <view class="nickname">{{ userInfo.nickname || userInfo.account }}</view>
            <navigator class="extra" url="/subPackages/profile/profile" hover-class="none">
               <text class="update">更新头像昵称</text>
            </navigator>
         </view>
      </view>
      <!-- 情况2：未登录 -->
      <view class="overview" v-else>
         <navigator url="/pages/login/login" hover-class="none">
            <image class="avatar gray" mode="aspectFill" src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"></image>
         </navigator>
         <view class="meta">
            <navigator url="/pages/login/login" hover-class="none" class="nickname">未登录</navigator>
            <view class="extra">
               <text class="tips">点击登录账号</text>
            </view>
         </view>
      </view>
      <navigator class="settings" url="/subPackages/settings/settings" hover-class="none">设置</navigator>
   </view>
</template>

<style scoped lang="scss">
.profile {
   position: relative;

   .overview {
      display: flex;
      height: 120rpx;
      padding: 0 36rpx;
      color: #fff;
   }

   .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: #eee;
   }

   .gray {
      filter: grayscale(100%);
   }

   .meta {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      line-height: 30rpx;
      padding: 16rpx 0;
      margin-left: 20rpx;
   }

   .nickname {
      max-width: 350rpx;
      margin-bottom: 16rpx;
      font-size: 30rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .extra {
      display: flex;
      font-size: 20rpx;
   }

   .tips {
      font-size: 22rpx;
   }

   .update {
      padding: 3rpx 10rpx 1rpx;
      color: rgba(255, 255, 255, 0.8);
      border: 1rpx solid rgba(255, 255, 255, 0.8);
      margin-right: 10rpx;
      border-radius: 30rpx;
   }

   .settings {
      position: absolute;
      bottom: 0;
      right: 40rpx;
      font-size: 30rpx;
      color: #fff;
   }
}
</style>